<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
    color:rgb(26, 68, 122);
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 400px;
    background: url('./sea.jpg');
    }
    </style>
</head>
<body>
    
    <form id="signInForm">
        <div>
            <label>用户名 : <input type="text" name="name"></label>
        </div>
        <div>
           <label>密&nbsp;&nbsp;&nbsp;码 : <input type="password" name="password"></label>
       </div>
       <div>
           <button type="submit" style="width: 60px;"> 登录</button>
       </div>
 </form>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
 <script>
    const $form=$('#signInForm')
        $form.on('submit',(e)=>{
            e.preventDefault()
            const name =$form.find('input[name=name]').val()
            const password=$form.find('input[name=password]').val()
            $.ajax({
                method:'POST',
                url:'/sign_in',
                contentType:'text/json;charset=UTF-8',
                data:JSON.stringify({name,password})
            }).then(()=>{alert('登录成功'),location.href='/home.html'},()=>{alert('登录失败')})
            //这里是抄的register界面的逻辑
            //先注册，再登录，再进首页
        })
</script>
</body>
</html>
